<template>
  <div class="page-container">
    <el-form ref="form" :model="form" label-width="110px">
      <div class="form-box">
        <p class="sub-title">营业执照信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="优惠券类型：" prop="aptitudeImage">
              <el-radio-group v-model="form.radio">
                <el-radio :label="3">满减券</el-radio>
                <el-radio :label="6">折扣券</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="优惠券名称：" prop="socialCreditCode">
              <el-input v-model="form.socialCreditCode" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="优惠券备注：" prop="socialCreditCode">
              <el-input v-model="form.socialCreditCode" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="优惠内容：" prop="mainBodyType">
              <div>
                <el-radio v-model="form.radio" label="1">
                  满
                  <el-input v-model="form.socialCreditCode" class="min-input" placeholder="请输入" clearable />
                  <el-select v-model="form.mainBodyType" class="min-select" clearable>
                    <el-option :value="1" label="元" />
                    <el-option :value="2" label="件" />
                  </el-select>
                </el-radio>
              </div>
              <div class="coupon-item">
                <el-radio v-model="form.radio" label="1">
                  无门槛 减
                  <el-input v-model="form.socialCreditCode" class="min-input" placeholder="请输入" clearable />
                </el-radio>
              </div>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="可使用时间：" prop="mainBodyType">
              <div>
                <el-radio v-model="form.radio" label="1">
                  <el-date-picker
                    v-model="form.value1"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                  />
                </el-radio>
              </div>
              <div class="coupon-item">
                <el-radio v-model="form.radio" label="1">
                  领券后立即生效，有效期
                  <el-input v-model="form.socialCreditCode" class="min-input" placeholder="请输入" clearable />
                  天
                </el-radio>
              </div>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="发放量：" prop="infoName">
              <el-input v-model="form.infoName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="适用门店：" prop="infoName">
              <el-select v-model="form.mainBodyType" clearable>
                <el-option :value="1" label="元" />
                <el-option :value="2" label="件" />
              </el-select>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="可选范围：" prop="aptitudeImage">
              <el-radio-group v-model="form.radio">
                <el-radio :label="3">全平台通用</el-radio>
                <el-radio :label="6">指定行业</el-radio>
                <el-radio :label="6">指定商家</el-radio>
                <el-radio :label="6">指定产品</el-radio>
                <el-radio :label="6">不可用产品</el-radio>
              </el-radio-group>
              <p class="coupon-item">
                <el-button type="primary">选择行业</el-button>
              </p>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="form-box">
        <p class="sub-title">发放和使用规则</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="发放渠道：" prop="belongingPlace">
              <el-radio-group v-model="form.radio">
                <el-radio :label="3">领券中心</el-radio>
                <el-radio :label="6">定向发放</el-radio>
              </el-radio-group>
              <p class="coupon-item">
                <el-button type="primary">添加发放用户</el-button>
              </p>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="领取次数：" prop="idCardNumber">
              <el-radio-group v-model="form.radio">
                <el-radio :label="3">每人领取次数不限</el-radio>
                <el-radio :label="6">
                  每人最多可领取
                  <el-input v-model="form.socialCreditCode" class="min-input" placeholder="请输入次数" clearable />
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="叠加设置：" prop="idCardNumber">
              <el-radio-group v-model="form.radio">
                <el-radio :label="3">仅原价购买时可用</el-radio>
                <el-radio :label="6">与平台优惠券互斥</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="优惠券说明：" prop="aptitudeName">
              <el-input v-model="form.aptitudeName" type="textarea" rows="5" placeholder="请输入" clearable />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'CouponDetail',
  data() {
    return {
      form: {},
      loading: false,
      step: 1,
      stepList: [
        {
          title: '订单创建',
          time: '2022-12-12 12:00:00',
          status: 'success'
        },
        {
          title: '完成出票',
          status: 'process'
        },
        {
          title: '部分核销'
        },
        {
          title: '已完成'
        }
      ]
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'account', attrs },
        { label: '产品名称', prop: 'roleName', attrs },
        { label: '规则名称', prop: 'userName', attrs },
        { label: '零售价', prop: 'mobile', attrs },
        { label: '检验店铺', prop: 'mobile', attrs },
        { label: '产生时间', prop: 'sexStr', attrs },
        { label: '状态', slot: 'statusStr', attrs }
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '订单状态',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '支付方式',
          prop: 'roleName',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      // const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      // const data = {
      //   pageNo,
      //   pageSize,
      //   createStartTime,
      //   createEndTime,
      //   ...formQuery
      // }
      // getRoleList(data).then(res => {
      //   this.loading = false
      //   done({ data: res.data || [], total: res.count || 0 })
      // }).catch(() => {
      //   done({ data: [], total: 0 })
      //   this.loading = false
      // })
      done({ data: [1], total: 0 })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables";
.form-box{
  padding: 20px 30px;
  .sub-title{
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #333;
    padding-left: 20px;
    border-left: 4px solid $primary;
  }

  .form-item {
    margin-top: 20px;
  }

  .form-flex-item{
    display: flex;
    width: 900px;
  }

  .coupon-item{
    margin-top: 10px;
  }

  .el-input, .el-select, .el-textarea{
    width: 400px;
  }

  .min-input{
    width: 200px;
    padding: 0 5px;
  }
  .min-select{
    margin-left: 10px;
  }

 .min-select, ::v-deep .min-select .el-input{
    width: 150px;
  }

}
</style>
